let Register = {

    render: async () => {
        return /*html*/ `
        <div class="my-container">
            <div class="row">
                <div class="col-lg-5 col-md-7">
                    <!-- form card login -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="mb-0">注 册</h3>
                        </div>
                        <div class="card-body">
                          <form class="was-validated">
                            <div class="form-group">
                                <input class="form-control" placeholder="手机号码" id="phone" required>
                                <div class="valid-feedback">Valid.</div>
                                <div class="invalid-feedback">请填写.</div>
                                <div class="i-icon i-icon-phone"></div>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" placeholder="密码" id="pwd" required>
                                <div class="valid-feedback">Valid.</div>
                                <div class="invalid-feedback">请填写.</div>
                                <div class="i-icon i-icon-password"></div>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="用户名" id="username" required>
                                <div class="valid-feedback">Valid.</div>
                                <div class="invalid-feedback">请填写.</div>
                                <div class="i-icon i-icon-username"></div>
                            </div> 
                            <div class="form-group">
                                    <input id="verifycode" class="form-control" placeholder="验证码" required>
                                    <div class="valid-feedback">Valid.</div>
                                    <div class="invalid-feedback">请填写.</div>
                                    <div class="sendVerifyCode get-checkcode-btn">获取验证码</div>
                                    <div class="i-icon i-icon-checkcode"></div>
                            </div>

                            <div class="login-btn-wrapper">
                                <div class="login-btn" id="register_submit_btn">立即注册</div>
                                <div class="register-btn" id="toLogin">我有账号</div>
                            </div>
                          </form>
                          <p class="statusMsg"></p>
                        </div>
                    </div>
                </div>
            </div>
            ${window.ScirichonFooter}
        </div>
        `
    }
    , after_render: async () => {
        $("#register_submit_btn").attr("disabled", true);
        var $button = $(".sendVerifyCode");
        var number = 30;
        var countdown = function(){
            if (number == 0) {
                $button.attr("disabled",false);
                $button.html("Send VerifyCode");
                number = 30;
                return;
            } else {
                $button.attr("disabled",true);
                $button.html(`send after ${number} seconds`);
                number--;
            }
            setTimeout(countdown,1000);
        }

        $(".sendVerifyCode").click(() => {
            setTimeout(countdown, 1000);
            $.post(window.SMSCODE_URL, {phone: $('#phone').val()})
                .done(function (data) {
                    if(data&&data.code){
                        console.log("verify code:", data.code)
                    }
                    $("#register_submit_btn").removeAttr("disabled");
                }).fail((xhr) => {
                console.error(xhr.responseText)
            })
        })

        $("#register_submit_btn").click((event) => {
            event.preventDefault()
            let encryptedPasswd = window.crypt.encrypt($('#pwd').val())
            let data = {
                name: $('#username').val(),
                passwd: encryptedPasswd,
                phone: $('#phone').val(),
                code: $('#verifycode').val()
            }
            window.spinner.spin(document.body, '注册中...')
            $.ajax({
                type: "POST",
                url: window.REGISTER_URL,
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: (data)=>{
                    window.spinner.stop()
                    $('.statusMsg').html('<span style="color:green;">register success!</p>');
                    localStorage.setItem('token',data.token)
                    window.renderNavBar();
                    window.onNavigate('/')
                },
                error: (xhr)=>{
                    window.spinner.stop()
                    $('.statusMsg').html(`<span style="color:red;">${xhr.responseText}</p>`);
                },
                dataType: 'json'
            });
        })
        $("#toLogin").click((event) => {
            window.onNavigate('/login')
        })
        $("input").keyup((event)=>{
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById("register_submit_btn").click();
            }
        })
    }
}

export default Register;
